<template>
    <div class="table-expand-style">
        <Table :columns="columns" :data="list" @on-selection-change="handleSelectionChange"></Table>
    </div>
</template>

<script>
import commonJS from '../js/common'
export default {
    name: 'TableExpand',
    props: ['list'],
    data () {
        return {
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '提运单号',
                    key: 'billNo',
                    align: 'center',
                    width: 100,
                    render: (h, params) => {
                        return h('div', [
                            h('span', [
                                h('Poptip', {
                                    props: {
                                        trigger: 'hover',
                                        confirm: false,
                                        content: params.row.billNo,
                                        size: 'small'
                                    },
                                    style: {
                                        display: 'inline-block',
                                        width: '100%',
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap'
                                    }
                                }, params.row.billNo)
                            ])
                        ])
                    }
                },
                {
                    title: '状态',
                    key: 'consignmentStatus',
                    align: 'center',
                    width: 80,
                    render: (h, params) => {
                        return h(
                            'span',
                            this.statusList[params.row.consignmentStatus]
                        )
                    }
                },
                {
                    title: '货物总件数',
                    key: 'totalPackageQuantity',
                    align: 'center'
                },
                {
                    title: '货物总毛重（kg）',
                    key: 'totalGrossMeasure',
                    align: 'center'
                },
                {
                    title: '货值',
                    key: 'cargoValue',
                    align: 'center',
                    width: 80
                },
                {
                    title: '金额类型',
                    key: 'amountType',
                    align: 'center',
                    width: 100,
                    render: (h, params) => {
                        return h(
                            'span',
                            params.row.amountType + '/' + params.row.amountTypeName
                        )
                    }
                },
                {
                    title: '最新回执',
                    key: 'noticeMessage',
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('span', [
                                h('Poptip', {
                                    props: {
                                        trigger: 'hover',
                                        confirm: false,
                                        content: params.row.noticeMessage,
                                        size: 'small'
                                    },
                                    style: {
                                        display: 'inline-block',
                                        width: '100%',
                                        overflow: 'hidden',
                                        textOverflow: 'ellipsis',
                                        whiteSpace: 'nowrap'
                                    }
                                }, params.row.noticeMessage)
                            ])
                        ])
                    }
                }
            ],

            // 状态list
            statusList: commonJS.statusList
        }
    },
    methods: {
        handleSelectionChange (list) {
            this.$emit('on-selection-change', list)
        }
    }
}
</script>

<style lang="less">
    .table-expand-style {
        margin-right: 60px;
        .ivu-table-wrapper {
            border: none !important;
        }
        .ivu-table:before {
            height: 0 !important;
        }
        .ivu-table:after {
            width: 0 !important;
        }
    }
</style>
